/******************************************************************************
* File description: SettingPreference.qml
* Function: 设置-偏好设置
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-30
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.14

Item {
    id: root

    /* property 定义开始 */
    // 信号
    signal settingReturnSig()
    /* property 定义结束 */

    // 顶部导航栏
    TabbarNav {
        id: tabNav
        width: parent.width
        isEnable: true
        title: "偏好设置"

        onReturnSig: {
            root.settingReturnSig()
            console.log("tabbar nav")
        }
        z: 999
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        // 主体部分
        Rectangle {
            id: mainPart
            Layout.fillWidth: true
            Layout.preferredHeight: parent.height - btnContainer.height
            Layout.alignment: Qt.AlignTop

            // 背景
            Rectangle {
                anchors.fill: parent
                LinearGradient {
                    anchors.fill: parent
                    start: Qt.point(0, 0)
                    end: Qt.point(0, height)
                    gradient: Gradient {
                        GradientStop {position: 0.0; color: "#007BD8"}
                        GradientStop {position: 1.0; color: "#001A5A"}
                    }
                }
            }

            // 内容
            Rectangle {
                id: contentCon
                width: 600
                height: 330
                radius: 12
                color: "#C3FFFFFF"
                anchors.centerIn: parent

                ColumnLayout {
                    anchors.fill: parent
                    anchors.leftMargin: 40
                    anchors.rightMargin: 40
                    anchors.topMargin: 60
                    spacing: 25

                    // 国际化
                    LabelComboBox {
                        id: i18nComboBox
                        Layout.fillWidth: true
                        Layout.preferredHeight: 40
                        Layout.leftMargin: 62
                        Layout.rightMargin: 128
                        comboBoxWidth: width
                        comboBoxHeight: height
                        showListMaxCountinPage: 5
                        model: ["中文"]
                        comboBoxText: "国际化"

                        Component.onCompleted: {
                            i18nComboBox.setLabelSize(voiceText.implicitWidth, undefined)
                        }
                    }

                    Item {
                        Layout.fillWidth: true
                        Layout.preferredHeight: 40
                        Layout.leftMargin: 62
                        Layout.rightMargin: 128

                        // 语音模块
                        RowLayout {
                            anchors.fill: parent
                            spacing: 8

                            Label {
                                id: voiceText
                                font.pixelSize: 16
                                color: "#FF222222"
                                text: "语音模块"
                            }

                            Switch {
                                id: voiceSwitch

                                // 整个switch
                                indicator: Rectangle {
                                    id: switchItem
                                    implicitWidth: 66
                                    implicitHeight: 26
                                    x: voiceSwitch.leftPadding
                                    y: parent.height / 2 - height / 2

                                    radius: 13
                                    color: "#ffffff"
                                    border.color: "transparent"

                                    //小圆点
                                    Rectangle {
                                        id : smallRect
                                        width: 26
                                        height: 26
                                        radius: 13
                                        color: voiceSwitch.checked ?  "#FF2F42CD" : "#FF999999"
                                        border.color: "transparent"

                                        //改变小圆点的位置
                                        NumberAnimation on x{
                                            to: switchItem.width - smallRect.width
                                            running: voiceSwitch.checked ? true : false
                                            duration: 200
                                        }

                                        //改变小圆点的位置
                                        NumberAnimation on x{
                                            to: 0
                                            running: voiceSwitch.checked ? false : true
                                            duration: 200
                                        }
                                    }
                                }

                                //要显示的文本
                                contentItem: Text {
                                    text: voiceSwitch.checked ? "打开" : "关闭"
                                    font.pixelSize: 16
                                    color: "#FF222222"
                                    verticalAlignment: Text.AlignVCenter
                                    anchors.left: switchItem.right
                                    anchors.leftMargin: 8
                                }
                            }

                            CustomHorSpacerItem {}
                        }
                    }

                    CustomVerSpacerItem {}
                }
            }
        }

        // 按钮部分
        Rectangle {
            id: btnContainer
            Layout.fillWidth: true
            Layout.preferredHeight: 80

            RowLayout {
                anchors.fill: parent
                anchors.rightMargin: 16
                anchors.leftMargin: 16

                CustomHorSpacerItem {}

                // 取消
                PureButton {
                    id: canceledBtn
                    pureText: "取消(C)"
                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                }

                // 保存
                GradientButton {
                    id: saveBtn
                    gradText: "保存(S)"
                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                }
            }
        }
    }
}
